<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<!-- Meta, title, CSS, favicons, etc. -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>随便打TCS系统</title>
	<!-- Bootstrap -->
	<link href="<%=basePath%>vendors/bootstrap/dist/css/bootstrap.min.css"
		  rel="stylesheet">
	<!-- Font Awesome -->
	<link
			href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
			rel="stylesheet">
	<!-- Select2 -->
	<link href="<%=basePath%>vendors/select2/dist/css/select2.min.css"
		  rel="stylesheet">
	<!-- NProgress -->
	<link href="<%=basePath%>vendors/nprogress/nprogress.css"
		  rel="stylesheet">
	<!-- iCheck -->
	<link href="<%=basePath%>vendors/iCheck/skins/flat/green.css"
		  rel="stylesheet">

	<!-- bootstrap-progressbar -->
	<link
			href="<%=basePath%>vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css"
			rel="stylesheet">
	<!-- JQVMap -->
	<link href="<%=basePath%>vendors/jqvmap/dist/jqvmap.min.css"
		  rel="stylesheet" />
	<!-- bootstrap-daterangepicker -->
	<link
			href="<%=basePath%>vendors/bootstrap-daterangepicker/daterangepicker.css"
			rel="stylesheet">

	<!-- Custom Theme Style -->
	<link href="<%=basePath%>build/css/custom.min.css" rel="stylesheet">

	<!-- 富文本  -->
	<link href="<%=basePath%>static/css/quill.snow.css" rel="stylesheet">

	<link href="<%=basePath%>Content/Layui-KnifeZ/css/layui.css" rel="stylesheet"/>

</head>

<body class="nav-md">
<div class="container body">
	<div class="main_container">
		<div class="col-md-3 left_col">
			<div class="left_col scroll-view">
				<div class="clearfix"></div>
				<br />
			</div>
		</div>

		<!-- page content -->
		<div class="right_col" role="main">
			<div class="">
				<div class="page-title">
					<div class="title_left">
						<h3>新手课堂</h3>
					</div>


				</div>
				<div class="clearfix"></div>

				<div class="row">
					<div class="col-md-12 col-sm-12 col-xs-12">
						<div class="x_panel">
							<div class="x_title">
								<h2>创建一个新手课堂</h2>

								<div class="clearfix"></div>
							</div>
							<div class="x_content">
								<form name="myForm" class="form-horizontal form-label-left"
									  novalidate method="post" enctype="multipart/form-data"
									  id="formUpload">

									<p>
										您需要将以下内容填写完整后才可以创建模块，如有疑问请
										<code>联系客服</code>
										以帮助您完成相关配置以及信息完善
									</p>
									<span class="section">基本信息</span>
									<%--<div class="item form-group">
										<label class="control-label col-md-3 col-sm-3 col-xs-12"
											   for="name">代理商 <span class="required">*</span>
										</label>
										<div class="col-md-6 col-sm-6 col-xs-12">
											<input id="goodstext" class="form-control col-md-7 col-xs-12"
												   name="goodstext" placeholder="请输入文字" required="required"
												   type="text" value="">
										</div>
									</div>--%>
									<input type="hidden" value="${nc.ncId}" name="ncId" id="ncId">
									<div class="item form-group">
										<label class="control-label col-md-3 col-sm-3 col-xs-12"
											   for="name">标题<span class="required">*</span>
										</label>
										<div class="col-md-6 col-sm-6 col-xs-12">
											<input id="ncTitle" class="form-control col-md-7 col-xs-12"
												   name="ncTitle" placeholder="请输入文字" required="required"
												   type="text" value="${nc.ncTitle}">
										</div>
									</div>

									<div class="item form-group" id="pic">
										<label class="control-label col-md-3 col-sm-3 col-xs-12"
											   for="name">图片<span class="required">*</span>
										</label>

										<div class="col-md-6 col-sm-6 col-xs-12">
											<input class="form-control col-md-7 col-xs-12" id="ncPic"
												   name="ncPic" required="required" type="file"
												   placeholder="请先上传图片" form="formUpload" value="${nc.ncPic}">
										</div>
										<span id="button1"><a type="button" class="btn btn-default"
															  href="javascript:void(0)">添加</a></span>
									</div>



<%--									<div class="item form-group">--%>
<%--										<label class="control-label col-md-3 col-sm-3 col-xs-12"--%>
<%--											   for="name">内容详情<span class="required">*</span>--%>
<%--										</label>--%>
<%--										<div class="col-md-6 col-sm-6 col-xs-12">--%>
<%--											<div id="standalone-container">--%>
<%--												<div id="toolbar-container">--%>
<%--												<span class="ql-formats">--%>
<%--												<!-- <select class="ql-font"></select> -->--%>
<%--												<select class="ql-size"></select>--%>
<%--												</span>--%>
<%--													<span class="ql-formats">--%>
<%--												<button class="ql-list" value="ordered"></button>--%>
<%--												</span>--%>
<%--													<span class="ql-formats">--%>
<%--												<select class="ql-align"></select>--%>
<%--												</span>--%>
<%--													<span class="ql-formats">--%>
<%--												<button class="ql-image"></button>--%>
<%--												</span>--%>
<%--												</div>--%>
<%--												<div id="editor-container" style="height:400px">${nc.ncContent}</div>--%>
<%--											</div>--%>
<%--										</div>--%>
<%--									</div>--%>

									<div class="item form-group">
										<label class="control-label col-md-3 col-sm-3 col-xs-12"
											   for="layeditDemo">内容详情<span class="required">*</span>
										</label>
										<div class="col-md-6 col-sm-6 col-xs-12">
											<div>
												<textarea id="layeditDemo" lay-verify="content"></textarea>
											</div>
										</div>
									</div>

									<div class="ln_solid"></div>
									<div class="form-group">
										<div class="col-md-6 col-md-offset-3">
											<a type="submit" class="btn btn-primary"
											   href="javascript:void(0)"
											   onclick="history.back(-1);">取消</a>
											<input id="update" type="button" class="btn btn-success"
												   value="修改">

										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 富文本 -->
		<script src="<%=basePath%>static/js/katex.min.js"></script>
		<script  src="<%=basePath%>static/js/highlight.min.js"></script>
		<script src="<%=basePath%>static/js/quill.js"></script>
		<script src="<%=basePath%>static/js/quill.min.js"></script>
		<!-- Initialize Quill editor -->
		<script src="<%=basePath%>static/js/jquery-1.7.1.min.js"></script>
		<script>
            var quill = new Quill('#editor-container', {
                modules: {
                    formula: true,
                    syntax: true,
                    toolbar: '#toolbar-container'
                },
                placeholder: '请输入内容',
                theme: 'snow'
            });
		</script>

		<!-- 上传图片并添加-->
		<script src="<%=basePath%>vendors/jquery/dist/jquery.min.js"></script>
		<script>
            $("#button1").click(function(){
                $("#button1").css("display","none");
                $("#ncPic").css("display","block");
            });
		</script>
		<script type="text/javascript">
            $('#update').click(function () {
                // 上传文件
                var detailpic = $("#ncPic")[0].files[0];
                var pic = "";
                alert(detailpic);

                if(detailpic != null || detailpic != undefined){

                    var fileName = detailpic.name.substring(detailpic.name.lastIndexOf(".")+1).toLowerCase();
                    if(fileName !="jpg" && fileName !="jpeg" && fileName !="png"&& fileName !="gif" ){
                        alert("只能上传 .jpg .png .jpeg .gif类型的文件");
                        return false;
                    }
                    pic = addfile(detailpic);
                }else{
                    alert("未添加图片");
                    return false
				}


                ajaxPost(pic);
            });

            function addfile(file) {
                var fm = new FormData();
                fm.append('file', file);
                $.ajax({
                    url: "<%=basePath%>layfile/uploadFile1",
                    type : 'POST',
                    data : fm,
                    async : false,
                    contentType : false, //禁止设置请求类型
                    processData : false, //禁止jquery对DAta数据的处理,默认会处理
                    //禁止的原因是,FormData已经帮我们做了处理
                    success : function(result) {
                        file = result.json;
                    }
                });
                return file;
            }
		</script>

		<script type="text/javascript">
            // ajax 对象
            function ajaxObject() {
                var xmlHttp;
                try {
                    // Firefox, Opera 8.0+, Safari
                    xmlHttp = new XMLHttpRequest();
                } catch (e) {
                    // Internet Explorer
                    try {
                        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                    } catch (e) {
                        try {
                            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                        } catch (e) {
                            alert("您的浏览器不支持AJAX！");
                            return false;
                        }
                    }
                }
                return xmlHttp;
            }


            // ajax post请求：
            function ajaxPost(ncPic) {
                var ncTitle = $("#ncTitle").val(); // 获取标题内容
				var ncId =  $("#ncId").val();
                // var ncContent = encodeURIComponent($(".ql-editor").html());//获取富文本内容
				var ncContent = $('#LAY_layedit_1').contents().find("body").html();
				var ajax = ajaxObject();
                ajax.open("post", "updateNoviceList?ncTitle=" + ncTitle +
                    "&ncContent=" + ncContent +   //添加内容
                    "&ncPic=" + ncPic +   //添加图片
                   	 "&ncId=" + ncId    //Id
                    , true);

                ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

                ajax.onreadystatechange = function() {
                    if (ajax.readyState == 4) {
                        if (ajax.status == 200) {
                            var result = ajax.responseText;
                            if (result == "1") {
                                //请求成功
                                alert("修改成功");
                                location.href = "noviceListIndex";
                            }
                            if (result == "-1"){
                                alert("登录超时，请重新登录");
                                top.location.href = "login/${titleId}";
                            }
                        } else if (ajax.status == 0) {
                            //请求失败
                            alert("您使用的火狐浏览器不支持本次操作，请更换浏览器重试");
                        }else {
                            //请求失败
                            alert("请求终止，请检查操作或联系客服咨询" + ajax.status);
                        }
                    } else {
                    }
                };
                ajax.send();

            }

		</script>
	</div>
</div>

<!-- jQuery -->
<script src="<%=basePath%>vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="<%=basePath%>vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="<%=basePath%>vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="<%=basePath%>vendors/nprogress/nprogress.js"></script>
<!-- bootstrap-daterangepicker -->
<script src="<%=basePath%>vendors/moment/min/moment.min.js"></script>
<script
		src="<%=basePath%>vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- Chart.js -->
<script src="<%=basePath%>vendors/Chart.js/dist/Chart.min.js"></script>
<!-- validator -->
<script src="<%=basePath%>vendors/validator/validator.js"></script>
<!-- Custom Theme Scripts -->
<script src="<%=basePath%>build/js/custom.min.js"></script>
<!-- Select2 -->
<script src="<%=basePath%>vendors/select2/dist/js/select2.full.min.js"></script>
<script src="<%=basePath%>Content/Layui-KnifeZ/layui.js"></script>
<script src="<%=basePath%>Content/ace/ace.js"></script>
<script>
	console.log("nihao");
	layui.use(['layedit', 'layer', 'jquery'], function () {
		var $ = layui.jquery;
		var layedit = layui.layedit;
		layedit.set({
			//暴露layupload参数设置接口 --详细查看layupload参数说明
			uploadImage: {
				url: '<%=basePath%>layfile/uploadFile1',
				accept: 'image',
				acceptMime: 'image/*',
				exts: 'jpg|png|gif|bmp|jpeg',
				size: '10240'
			}
			, uploadVideo: {
				url: '/Attachment/LayUploadFile',
				accept: 'video',
				acceptMime: 'video/*',
				exts: 'mp4|flv|avi|rm|rmvb',
				size: '20480'
			}
			//右键删除图片/视频时的回调参数，post到后台删除服务器文件等操作，
			//传递参数：
			//图片： imgpath --图片路径
			//视频： filepath --视频路径 imgpath --封面路径
			, calldel: {
				url: '/Attachment/DeleteFile'
			}
			//开发者模式 --默认为false
			, devmode: false
			//插入代码设置
			, codeConfig: {
				hide: true,  //是否显示编码语言选择框
				default: 'javascript' //hide为true时的默认语言格式
			}
			, tool: [
				'html', 'code', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'fontFomatt', 'colorpicker', 'face'
				, '|', 'left', 'center', 'right', '|', 'link', 'unlink', 'image_alt', 'video', 'anchors'
				, '|', 'fullScreen'
			]
			, height: '90%'
		});
		var ieditor = layedit.build('layeditDemo');

		form.verify({
			content: function (value) {
				return layedit.sync(ieditor);
			}
		});

	})
</script>
</body>
</html>